import { TAtilcleInfo } from '@/api'
import Icon from '@/component/Icon'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import {
  collectArticleAction,
  disCollectArticleAction,
  disLikeArticleAction,
  likeArticleAction
} from '@/store/reducers/article'
import { Toast } from 'antd-mobile'
import styles from './index.module.scss'

type Props = {
  // normal 普通评论
  // reply 回复评论
  type?: 'normal' | 'reply'
  articleInfo?: TAtilcleInfo
  show?:()=>void
}

const CommentFooter = ({ type = 'normal',show }: Props) => {
  
    // const { attitude, art_id, is_collected,comm_count } = articleInfo
  const articleInfo = useAppSelector(state => state.articler.articleInfo)
  
  const dispatch = useAppDispatch()

  // 点赞或取消点赞
  const likeOrDislike = async () => {
    // 取消
    if (articleInfo.attitude === 1) {
      await dispatch(disLikeArticleAction(articleInfo.art_id))
    } else {
      // 点赞
      await dispatch(likeArticleAction(articleInfo.art_id))
    }

    Toast.show({
      icon: 'success',
      content: articleInfo.attitude === 1 ? '取消成功' : '点赞成功'
    })
  }
  // 收藏或取消收藏
  const collectOrDisCollect = async () => {
    // 取消
    if (articleInfo.is_collected === true) {
      await dispatch(disCollectArticleAction(articleInfo.art_id))
    } else {
      // 点赞
      await dispatch(collectArticleAction(articleInfo.art_id))
    }

    Toast.show({
      icon: 'success',
      content: articleInfo.attitude === 1 ? '取消成功' : '收藏成功'
    })
  }
  return (
    <div className={styles.root}>
      <div className='input-btn' onClick={show}>
        <Icon type='iconbianji' />
        <span>抢沙发</span>
      </div>

      {type === 'normal' && (
        <>
          <div className='action-item'>
            <Icon type='iconbtn_comment' />
            <p>评论</p>
            {!!articleInfo.comm_count && <span className='bage'>{articleInfo.comm_count}</span>}
          </div>
          <div className='action-item' onClick={likeOrDislike}>
            <Icon
              type={articleInfo.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
            <p>{articleInfo.attitude === 1 ? '取消' : '点赞'}</p>
          </div>
          <div className='action-item' onClick={collectOrDisCollect}>
            <Icon
              type={articleInfo.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'}
            />
            <p>{articleInfo.is_collected ? '取消' : '收藏'}</p>
          </div>
        </>
      )}

      {type === 'reply' && (
        <div className='action-item'>
          <Icon type={false ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
          <p>点赞</p>
        </div>
      )}

      <div className='action-item'>
        <Icon type='iconbtn_share' />
        <p>分享</p>
      </div>
    </div>
  )
}

export default CommentFooter
